<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<c-nav-bar :title="title"></c-nav-bar>


		<view class="swiper_img">
			<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
				style="height: 612rpx" @change="PicImg" :current="PicImgIndex">
				<swiper-item class="swiper-items" v-if="photoAlbumList&&photoAlbumList.length>0" v-for="(item, index) in photoAlbumList" :key="index">
					<image class="image" v-if="item.type == 3" style="width: 100%; height: 100%" :src="item.pic"
						mode="aspectFill">
					</image>
				</swiper-item>
			</swiper>
			<view class="numPic">
				<view class="" v-if="photoAlbumList&&photoAlbumList.length>0">
					{{currentNumList}}/{{photoAlbumList.length}}
				</view>
			</view>
		</view>



		<!-- 基本信息 -->
		<view class="info">
			<view class="name">{{ jointName }}</view>
			<view class="info-content">
				<view class="card-text1">
					<!-- <text v-for="ite,ind in item.featureLabelList"> {{ite}}</text> -->
					<u-tag :text="ite" v-for="ite, ids in featureLabelList" :key="ids" type="success" plain size="mini"
						borderColor='#DCC7AB' color='#C9A771'>
					</u-tag>
				</view>

				<view class="card-arrow-right" @click="mustKnow">
					<view>预订说明</view> <u-icon name="arrow-right" color='#007A69' size="24rpx"></u-icon>
				</view>
			</view>
			<view class="bot" v-if="bottomPrice == null"
				style="font-weight: bold; font-size: 30rpx; color: #FF4141; margin: 16rpx 0 0;">
				暂无房间
			</view>
			<view class="bot" v-else>
				<text>￥</text>
				<text style="font-weight: 600; font-size: 48rpx;">{{ bottomPrice }}</text>
				<text>/</text>
				<text>人起</text>
			</view>


		</view>

		<!-- 日期选择 -->
		<view class="book">
			<view class="tit">
				出游日期
			</view>
			<view class="date">
				<view :class="['item', index == currentDate ? 'itemSelected' : '']" v-for="(item, index) in dateArr"
					:key="index" @click="handleDate(item, index)">
					<!-- <view class=""> -->
					<text>{{ weeks[item.week] }}</text>
					<text>{{ item.time }}</text>
					<!-- </view> -->
					<!-- <text>¥ {{bottomPrice}}/人</text> -->
				</view>
				<view class="item" @click='gengduo()'>
					<text>更多</text><text>日期</text>
				</view>
			</view>
			<view class="tit">
				选择航班
			</view>
			<view class="flight">
				<view class="line"></view>
				<view class="p">
					<text>出发地点</text>
					<text class="circle"></text>
					<text>{{ myList.startPortName }}</text>
				</view>
				<view class="p">
					<text>抵达地点</text>
					<text class="circle to"></text>
					<text>{{ myList.endPortName }}</text>
				</view>
				<view class="timesCheck">
					<text class="keyword">航班时间</text>
					<view class="timesCheckData" v-if="myList.routeList !== null">
						<view :class="['item', index == boatIndex ? 'boatSelected' : '']"
							v-for="(item, index) in myList.routeList" :key="index" @click="boat(item, index)">
							<text>{{ item.sailTime }}</text>
							<text>余{{ item.priceAndTotalCount.pubTotalCount }}</text>
							<text class="boat" :class="index == boatIndex ? 'boatColor' : ''">{{ item.clxm }}</text>
							<view class="cover" v-if="item.priceAndTotalCount.pubTotalCount == 0"></view>
						</view>
					</view>
					<view class="timesCheckData" v-else style="color: #FF7D01; font-size: 24rpx;">
						当日已无出行航班，请选择其他日期
					</view>

				</view>
				<view class="timesCheck" v-if="myList.routeList !== null">
					<text class="keyword"> 选择舱位</text>
					<view class="timesCheckData">
						<view :class="['item', index == cabinIndex ? 'cabSelected' : '']"
							v-for="(item, index) in cabinList" :key="index" @click="cabin(item, index)">
							<text>{{ item.className }}</text>
							<text>余{{ item.pubCurrentCount }}</text>
							<text>￥{{ item.totalPrice }}</text>
							<view class="cover" v-if="item.pubCurrentCount == 0"></view>
						</view>
					</view>
				</view>
				<view class="" v-else>
				</view>
			</view>
		</view>


		<view class="roomTypes">
			<view class="tit">
				选择房型
			</view>
			<view class="two-center-two" @tap="shijian()">
				<view class="lfet">
					<view class="lfet-one">
						入住日期
					</view>
					<view class="lfet-two">
						<text class="lfet-two-one">{{ arriveTime }}月{{ arriveTimes }}日</text>
						<text class="lfet-two-two">{{ departWeek }}</text>
					</view>
				</view>
				<view class="content">
					<view class="content-one">
					</view>
					<view class="content-two">
						共{{ count }}晚
					</view>
				</view>
				<view class="right">
					<view class="right-one">
						离店日期
					</view>
					<view class="right-two">
						<!-- 	<text
							class="right-two-one">{{leaveTime.length>2?leaveTime.substring(5,7):leaveTime}}月{{leaveTimes}}日</text> -->
						<text class="right-two-one">{{ leaveTime }}月{{ leaveTimes }}日</text>
						<text class="right-two-two">{{ departWeeks }}</text>
					</view>
				</view>
			</view>

			<view class="three">
				<view class="card">
					<view class="" v-if="cardList.length > 0" v-for="item, index in cardList" :key="index">
						<view class="card-store" :class="item.roomState == 1 ? '' : 'gray'">
							<view class="card-left" @tap=" cardShow(item)">
								<image :src="item.cover" mode="aspectFill"></image>
							</view>
							<view class="card-right" style="padding: 0 20rpx;">
								<view class="left-title" @tap=" cardShow(item)">
									<view class="" style="display: flex; ">
										<text style="font-weight: 600;">{{ item.name }}</text>
										<u-icon class="left-icon" name="arrow-right"></u-icon>
									</view>
								</view>
								<view class="left-text" :class="item.roomState == 1 ? '' : 'gray'"
									@tap=" cardShow(item)" v-if="item.bedData.length > 1">
									<u-icon name="order"></u-icon>
									{{ item.area }}m²
									·{{ item.bedData[0].num }}张{{ item.bedData[0].category }}{{ item.bedData[0].size }}
									·{{ item.bedData[1].num }}张{{ item.bedData[1].category }}{{ item.bedData[0].size }}
								</view>

								<view class="left-text" :class="item.roomState == 1 ? '' : 'gray'"
									@tap=" cardShow(item)" v-else-if="item.bedData.length == 1">
									<u-icon name="order"></u-icon>
									{{ item.area }}m²
									·{{ item.bedData[0].num }}张{{ item.bedData[0].category }}{{ item.bedData[0].size }}
								</view>

								<view class=""
									style="display: flex; justify-content: space-between; align-items: center; width: 460rpx;">
									<view class="left-brekker" @tap=" cardShow(item)">
										<u-icon name="integral"></u-icon>
										{{ item.breakfastType == 0 ? '无早' : '含早' }}
									</view>
									<view class="left-brekker"></view>
									<view class="" style="margin-left: 100rpx; " v-if="item.roomState == 1">

										<image class="chk" style="width: 38rpx;height: 38rpx;"
											@tap="radioChange(index, item)"
											:src="index == radioChangeindex ? 'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png' : 'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
										</image>
									</view>
									<view class="" style="margin-left: 100rpx;" v-else>
										<image class="chk" style="width: 38rpx;height: 38rpx;"
											src="@/static/index/hotel/unselected.png"> </image>
									</view>
								</view>
								<view class="left-price" @tap=" cardShow(item)">
									<view class="left-price-one" v-if="item.roomState == 1">
										<view class="left-price-one-hander">
											<view class="left-price-one-right">
												<text style="font-size: 20rpx; font-weight: Regular;">￥</text>
												{{ item.bottomPrice }}
											</view>
											<view class="left-price-one-left">
												<!-- ￥{{item.bottomPrice+60}} -->
											</view>

										</view>
										<!-- 	<view class="left-price-one-bottom">
											优惠已减￥60
										</view> -->

									</view>
									<view class="" v-else style="color:#777777; font-size: 36rpx;">
										满房
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="two-list" v-if="copyList.length > 4" @click="showMore()">
					<view>{{ !expand ? '展开查看全部房型' : '收起查看部分房型' }}
						<image src="https://i.ringzle.com/file/20240129/8685b58bb76a48cdbf3aa53f0fc60fd9.png"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</view>


		<view class="" style="margin-top: 20rpx;">
			<view class="aroundList1 ai1">
				<view class="title">
					详情介绍
				</view>
				<view class="aroundList1-one" :style="{ 'height': h1 }">
					<view v-for="item, index in substrings ">
						<u-parse class="text-two" :content='item' :tagStyle="style"></u-parse>
					</view>
					<!-- 		<view v-for="(item,index) in picImageList" :key="index">
						<image class="aroundList1-one-image" v-if="item.type==3" :src="item.pic" mode=""></image>
							<video class="aroundList1-one-image" v-if="item.type==8" id="myVideo2" ref="myVideoRef2"
							:src="item.pic" :show-center-play-btn="true" :controls="true" object-fit="cover"></video>
					</view> -->
					<view @click="h1 = 'auto'" v-if="h1 != 'auto'" class="zk">
						展开查看更多
					</view>
					<view @click="h1 = '800rpx'" v-else class="zk">
						收起
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-btn">
			<!-- 	<view class="left" @click="phoneNumber">
				<view class="">
					<u-icon name="server-fill"></u-icon>
				</view>
				<view class="">
					客服
				</view>
			</view> -->
			<view class="right" @tap="navOrder">
				<text style="margin: 0 auto;">立即预订</text>
			</view>
		</view>
		<u-calendar title="选择日期" startText="住店" endText="离开" :maxDate="maxDate" :defaultDate="defaultDate"
			confirmDisabledText="请选择日期" :formatter="formatter" :show="timeShow" mode="single" @confirm="confirm"
			@close="closeDate" ref="calendar" :closeOnClickOverlay="true">
		</u-calendar>

		<u-calendar title="选择离店日期" confirmDisabledText="确定" :defaultDate="defaultDate" :show="showed" mode="range"
			@confirm="confirmed" :closeOnClickOverlay="true" @close="closeed" color="#007A69">
		</u-calendar>


		<u-popup :show="show" :round="10" closeIconPos='top-right' closeable mode="bottom" @close="close" @open="open">
			<view class="pop-pop">
				<view class="pop-img">
					<u-swiper :list="imgList" @change="e => currentNum = e.current" :autoplay="true"
						indicatorStyle="right: 20px" height='480rpx'>
						<view slot="indicator" class="indicator-num">
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ picListlength }}</text>
						</view>
					</u-swiper>
				</view>

				<view class="pop-titles">
					{{ DetailsedList.name }}
				</view>
				<view class="pop-grid">


					<view class="grid" v-if="DetailsedList.area">
						<image src="https://i.ringzle.com/file/20240416/1bf5ea857dc745d3b50633a1a5b0443b.png" mode="">
						</image>
						<view class="">
							整套房屋{{ DetailsedList.area }}m²
						</view>
					</view>
					<view class="grid">
						<image src="https://i.ringzle.com/file/20240416/cb90edc6fa0f4fd8be5a1609b4c15a23.png" mode="">
						</image>
						<view class="">
							<text v-if="DetailsedList.childCheckinNums != 0">
								可住{{ DetailsedList.checkinGuests }}成人{{ DetailsedList.childCheckinNums }}儿童
							</text>
							<text v-else>
								可住{{ DetailsedList.checkinGuests }}成人
							</text>
						</view>
					</view>
					<view class="grid" v-if="DetailsedList.bedData">
						<image src="https://i.ringzle.com/file/20240416/ffaa804b4b7d4b55aa3cf489b76521cf.png" mode="">
						</image>
						<view v-if="DetailsedList.bedData.length == 1">
							{{ DetailsedList.bedData[0].num }}张{{ DetailsedList.bedData[0].category }}
							<!-- {{DetailsedList.bedData[0].size}} -->
							<text v-if="DetailsedList.bedData[0].size != ''">{{ DetailsedList.bedData[0].size }}</text>
						</view>
						<view v-else>
							{{ DetailsedList.bedData[0].num }}张{{ DetailsedList.bedData[0].category }},{{ DetailsedList.bedData[1].num }}张{{ DetailsedList.bedData[1].category }}
						</view>
					</view>
					<view class="yuefen" v-for="item, index in DetailsedList.bedData" key="index">
						<view class="yunying11">
							{{ item.category }}
						</view>
						<view class="yunying11">
							{{ item.size }}
						</view>
						<view class="yunying11">
							{{ item.num }}张
						</view>
					</view>

				</view>

				<view style="background-color: #F5F8FA; width: 100%; height: 20rpx;"></view>

				<view class="pop-text">
					<view class="pop-titled">
						<view class="pop-title-one">
							房间设施
						</view>
						<!-- <view class="pop-title-two">
							<view class="title-one-image">
								<image src="https://i.ringzle.com/file/20240127/ba3a98d15d0a4cb78e499fce40742f51.png"
									mode="aspectFill"></image>
							</view>
							<view class="title-one-title">
								本处为门店设施，具体房型设施请参照房型详
							</view>
						</view> -->
					</view>
					<view class="pop-list" v-if="DetailsedList.bathroomWith != ''">
						<view class="left">
							卫浴
						</view>
						<view class="right">
							<view class="item" v-for="item, index in DetailsedList.bathroomWith">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill"></image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.homeWith != ''">
						<view class="left">
							居家
						</view>
						<view class="right">
							<view class="item" v-for="item, index in DetailsedList.homeWith">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill"></image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.hotelRecreation != ''">
						<view class="left">
							娱乐
						</view>
						<view class="right">
							<view class="item" v-for="item, index in DetailsedList.hotelRecreation">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill"></image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.hotelRoomService != ''">
						<view class="left">
							客房服务
						</view>
						<view class="right">
							<view class="item" v-for="item, index in DetailsedList.hotelRoomService">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill"></image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-list" v-if="DetailsedList.hotelSecurity != ''">
						<view class="left">
							安全
						</view>
						<view class="right">
							<view class="item" v-for="item, index in DetailsedList.hotelSecurity">
								<view class="image" v-if="item">
									<image
										src="https://i.ringzle.com/file/20240130/ee12f90f29184532a0f74d00807941ab.png"
										mode="aspectFill"></image>
								</view>
								<view class="text" v-if="item">
									{{ item }}
								</view>
							</view>
						</view>
					</view>


				</view>

			</view>
		</u-popup>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	var maxQueryDayNum = '';
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'

	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				title: '详情',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				currentNum: null,
				ticketSwiperList: [
					'https://i.ringzle.com/file/20231026/f9dbb2e4d62f45f4b7046c0e5da74015.png',
					'https://i.ringzle.com/file/20231026/f9dbb2e4d62f45f4b7046c0e5da74015.png',
					'https://i.ringzle.com/file/20231026/f9dbb2e4d62f45f4b7046c0e5da74015.png',
				],
				cardList: [{

				}],
				radioChangeindex: 9999,
				show: false,
				showed: false,
				// mode: 'range',
				popList: {},
				jointName: '',
				bottomPrice: '',
				fromData: {
					arriveDate: '',
					id: '',
					leaveDate: '',
					startPortNo: '',
					endPortNo: '',
				},
				arriveTime: '',
				arriveTimes: '',
				leaveTime: '',
				leaveTimes: '',
				count: 1,
				myList: '',
				hotelName: '',
				showList: {},
				option1: '',
				value: '',
				picLength: 0,
				fyInd: 0,
				lists: [1, 2, 3, 4],
				dateArr: [],
				weeks: ['周日', '周一 ', '周二', '周三', '周四', '周五', '周六'],
				departWeek: '',
				departWeeks: '',
				timeShow: false,
				currentDate: 0,
				boatIndex: 9999,
				timeList: [],
				boatTime: '',
				cabinIndex: 9999,
				cabinTime: '',
				featureLabelList: [],
				cabinList: [],
				fromList: [],
				handleList: {},
				boatList: [],
				boattime: '',
				cabiList: [],
				knownDate: '',
				dataList: {
					arriveDate: '',
					leaveDate: '',
					startPortNo: '',
					endPortNo: '',
					limit: 10,
					Page: 1,
				},
				fromPlace: '',
				toPlace: '',
				phone: '',
				DetailsedList: [],
				picListlength: '',
				maxDate: '',
				defaultDate: new Date().Format('yyyy-MM-dd'),
				confirmedStatus: false,
				copyList: [],
				expand: false, //是否展开,默认false
				substrings: {},
				style: {
					// 字符串的形式
					p: 'padding-bottom:120rpx;color:#666;font-size:30rpx; line-height: 48rpx; font-weight: Regular; ',
					image: 'width: 702rpx;'
					// span: 'font-size: 30rpx'
				},
				h1: '800rpx',
				picImageList: [],
				HotelInfoList: {
					arriveDate: '',
					leaveDate: '',
					homestayId: '',
					boundIds: '',
				},
				homestayId: '',
				VideoList: [],
				photoAlbumList: [
					{pic:'https://fsy.shengsi.gov.cn/file/20240730/9bc1732eadc94cbc8a562ae62997f79b.png'}
				],
				swiperShow: 8,
				imgList: [],
				currentNumList: 1,

			};
		},


		onLoad(e) {

			let opt = JSON.parse(e.list);

			// this.fromData.arriveDate = opt.arriveDate;
			// this.fromData.leaveDate = opt.leaveDate;

			this.fromData.arriveDate = opt.arriveDate || new Date().Format('yyyy-MM-dd');
			this.fromData.leaveDate = opt.leaveDate || new Date(new Date().setDate(new Date().getDate() + 1)).Format(
				'yyyy-MM-dd');
			this.fromData.id = opt.id;
			this.jointName = opt.jointName2;
			this.bottomPrice = opt.bottomPrice;
			this.fromData.startPortNo = opt.startPortNo;
			this.fromData.endPortNo = opt.endPortNo;
			this.featureLabelList = opt.featureLabelList;
			this.dataList.endPortNo = opt.endPortNo;
			this.dataList.startPortNo = opt.startPortNo;
			this.homestayId = opt.homestayId

			this.HotelInfoList.homestayId = opt.homestayId
			this.HotelInfoList.arriveDate = opt.arriveDate
			this.HotelInfoList.leaveDate = opt.leaveDate
			this.HotelInfoList.startPortNo = opt.startPortNo
			this.HotelInfoList.endPortNo = opt.endPortNo


			let start = new Date(this.fromData.arriveDate).getTime();
			let end = new Date(this.fromData.leaveDate).getTime();
			let time = end - start;

			let day = parseInt(time / (1000 * 60 * 60 * 24));

			this.arriveTime = this.fromData.arriveDate.slice(5, 7); // 截取第一个字符
			this.arriveTimes = this.fromData.arriveDate.slice(8, 10); // 截取第一个字符

			this.leaveTime = this.fromData.leaveDate.slice(5, 7); // 截取第一个字符
			this.leaveTimes = this.fromData.leaveDate.slice(8, 10); // 截取第一个字符


			// 获取出发航线

			// let obj = JSON.parse(wx.getStorageSync('cpzsParams'))
			// this.fromPlace = obj.fromPlace
			// this.toPlace = obj.toPlace

			this.count = day
			this.$refs.calendar.setFormatter(this.formatter);
			this.departWeek = this.weeks[new Date().getDay()];
			this.departWeeks = this.weeks[new Date().getDay() + this.count];
			this.getMaxDate();
			this.getDetails()
			this.getTimeList()
			this.getShipHotelInfoList()


		},

		methods: {

			gengduo() {
				this.timeShow = true
			},

			shijian() {
				this.showed = true
			},

			getMaxDate() {
				this.$api.get('/travel/isshipsaleconfig/page').then(res => {
					if (res.data.code === 0) {
						if (res.data.data.list.length > 0) {
							maxQueryDayNum = (+res.data.data.list[0].wysts || 0);
							this.maxDate = new Date(new Date().setDate(new Date().getDate() + (+maxQueryDayNum)))
								.Format('yyyy-MM-dd');
						}
					} else this.$showModal(res.data.msg);
				})
			},
			PicImg(e, i) {
				this.currentNumList = e.detail.current + 1
			},
			// 切换视频图片
			swiperVideo(e) {
				this.swiperShow = e
			},

			// 展开收回
			showMore() {

				this.expand = !this.expand;
				this.dealList();
			},
			dealList() {
				let tempList = JSON.parse(JSON.stringify(this.copyList));
				if (tempList.length > 4 && !this.expand) this.cardList = tempList.splice(0, 4);
				else this.cardList = tempList;
			},
			formatter(day) {
				if (maxQueryDayNum) {
					for (let i = 0; i <= maxQueryDayNum; i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
			closeDate() {
				this.timeShow = false;
			},
			close() {
				this.show = false
				this.currentNum = null
				this.imgList = []
			},
			closeed() {
				this.showed = false;
			},
			// 客服
			phoneNumber() {
				uni.makePhoneCall({
					phoneNumber: this.cabinList.landlinePhone //仅为示例
				});
			},


			// 预订说明
			mustKnow() {
				uni.navigateTo({
					url: '/pagesIndex/orderDetails/explain'
				})
			},



			confirm(e) {
				this.checkTime = e[0]

				let arriveDate = e[0]; // 截取第一个字符

				var knownDate = new Date(arriveDate);
				knownDate.setDate(knownDate.getDate() + 1);

				let leaveDate = knownDate.toISOString().split('T')[0]


				this.leaveTime = leaveDate.slice(5, 7); // 截取第一个字符
				this.leaveTimes = leaveDate.slice(8, 10); // 截取第一个字符

				this.fromData.arriveDate = arriveDate
				this.fromData.leaveDate = leaveDate
				this.arriveTime = arriveDate.slice(5, 7); // 截取第一个字符
				this.arriveTimes = arriveDate.slice(8, 10); // 截取第i一个字符

				let start = new Date(arriveDate).getTime();
				let end = new Date(leaveDate).getTime();
				let time = end - start;
				let day = parseInt(time / (1000 * 60 * 60 * 24));
				this.count = day;
				this.timeShow = false;
				this.currentDate = 0
				this.getTimeList(this.checkTime);
				this.getDetailsed()

				this.departWeek = this.weeks[new Date(e[0]).getDay()];

				if (new Date(e[e.length - 1]).getDay() + 1 == 7) {
					this.departWeeks = this.weeks[0];
				} else {
					this.departWeeks = this.weeks[new Date(e[e.length - 1]).getDay() + 1];
				}
			},
			confirmed(e) {
				this.checkTime = e[0]
				let arriveDate = e[0]; // 截取第一个字符
				let leaveDate = e[e.length - 1]; // 截取最后一个字符
				this.HotelInfoList.arriveDate = arriveDate
				this.HotelInfoList.leaveDate = leaveDate
				this.fromData.arriveDate = arriveDate
				this.fromData.leaveDate = leaveDate
				this.leaveTime = leaveDate.slice(5, 7); // 截取第一个字符
				this.leaveTimes = leaveDate.slice(8, 10); // 截取第一个字符
				this.arriveTime = arriveDate.slice(5, 7); // 截取第一个字符
				this.arriveTimes = arriveDate.slice(8, 10); // 截取第一个字符

				let start = new Date(arriveDate).getTime();
				let end = new Date(leaveDate).getTime();
				let time = end - start;

				let day = parseInt(time / (1000 * 60 * 60 * 24));
				this.count = day;
				// this.timeShow = false;
				this.showed = false
				this.confirmedStatus = true

				this.departWeek = this.weeks[new Date(e[0]).getDay()];
				this.departWeeks = this.weeks[new Date(e[e.length - 1]).getDay()];
				this.getShipHotelInfoList()
			},
			getShipHotelInfoList() {
				this.HotelInfoList.boundIds = uni.getStorageSync('boundIds');

				this.$api.get('/api/hotel/getHouseInfoList', this.HotelInfoList)
					.then(res => {
						this.copyList = res.data.data;
						this.cardList = res.data.data;

						this.cardList.forEach((item, i) => {
							let copy = JSON.parse(JSON.stringify(this.cardList));
							this.$set(this.cardList[i], 'canExpand', copy.length > 1 ? true :
								false);
							this.$set(this.cardList[i], 'tempList', copy.length > 1 ? copy.splice(0,
								1) : item.children);
						})
					})
			},

			getTimeList(currentDate) {
				let dateArr = [];
				for (let i = 0; i < 4; i++) {
					let date = this.getDay(i, currentDate);
					dateArr.push(date);
				}
				this.dateArr = dateArr;
			},

			getDay(day, current) {
				if (current) {
					var today = new Date(current);
				} else {
					var today = new Date();
				}
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				var tYear = today.getFullYear();
				this.currentYear = tYear;
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week,
					// price: this.total,
				};
				return json;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},


			// 选择游玩日期
			handleDate(item, index) {
				this.currentDate = index;
				this.boatIndex = 9999;
				this.cabinIndex = 9999;
				this.boatList = [];
				this.cabiList = [];
				this.checkTime = item.time
				// this.fromData.arriveDate=item.
				this.handleList = item
				var date = new Date();
				var year = date.getFullYear();
				this.fromData.arriveDate = year + '-' + item.time
				this.dataList.arriveDate = year + '-' + item.time

				var knownDate = new Date(this.fromData.arriveDate);
				knownDate.setDate(knownDate.getDate() + 1);
				this.boattime = item.time
				this.dataList.leaveDate = knownDate.toISOString().split('T')[0]
				this.fromData.leaveDate = knownDate.toISOString().split('T')[0]

				this.arriveTime = this.fromData.arriveDate.slice(5, 7); // 截取第一个字符
				this.arriveTimes = this.fromData.arriveDate.slice(8, 10); // 截取第一个字符

				this.leaveTime = this.dataList.leaveDate.slice(5, 7); // 截取第一个字符
				this.leaveTimes = this.dataList.leaveDate.slice(8, 10); // 截取第一个字符
				let start = new Date(this.fromData.arriveDate).getTime();
				let end = new Date(this.dataList.leaveDate).getTime();
				let time = end - start;
				let day = parseInt(time / (1000 * 60 * 60 * 24));
				this.count = day;

				if (item.week == 6) {
					this.departWeek = this.weeks[item.week];
					this.departWeeks = this.weeks[0];
				} else {
					this.departWeek = this.weeks[item.week];
					this.departWeeks = this.weeks[item.week + 1];
				}
				this.getDetailsed()
			},
			// 选择航线时间
			boat(item, index) {
				this.boatIndex = index;
				this.boatTime = item.time;
				this.cabinList = item.seatClasses;
				this.boatList = item;
				this.cabinIndex = 9999;
				this.cabiList = [];
			},
			// 选择舱位
			cabin(item, index) {
				this.cabinIndex = index
				this.cabinTime = item.time
				this.cabiList = item
			},
			// 选择房间
			radioChange(index, item) {
				this.radioChangeindex = index
				this.fromData.homestayId = item.homestayId
				this.fromData.houseBaseId = item.id
				this.fromList = item
			},
			// 房间详情
			cardShow(item) {
				this.show = true
				this.showList = item
				this.getDetailslist(item.id)
			},
			open() {
				this.currentNum = null
				this.imgList = []
			},

			// 填写订单
			navOrder() {
				if (this.boatList.length == 0 && this.boatList == '') return this.$showToast('请选择航班时间');
				if (this.cabiList.length == 0 && this.cabiList == "") return this.$showToast('请选择舱位');
				if (this.cabiList.pubCurrentCount == 0) return this.$showToast('舱位余票不足');
				if (this.fromList.length == 0 && this.fromList == '') return this.$showToast('请选择房型');

				uni.setStorageSync('submitOrderSearchList', encodeURIComponent(JSON.stringify({
					jointName: this.jointName,
					departWeek: this.departWeek,
					departWeeks: this.departWeeks,
					count: this.count,
					...this.fromData,
					...this.myList,
					...this.fromList,
					...this.handleList,
					...this.boatList,
					...this.cabiList,
					boattime: this.boattime,
				})));


				this.$login().then(res => {
					if (res !== 0) {
						this.$refs['phoneNumber'].show = true;
					}
				})
				if (uni.getStorageSync('access_token')) {
					uni.navigateTo({
						url: "/pagesIndex/submitOrder/submitOrder"
					})
				}
			},
			// 酒店详情弹框
			showBtn(index) {
				this.show = true
			},
			//套餐详情
			getDetails() {
				this.$api.get('/api/shipHotel/getShipHotelInfo', this.fromData)
					.then(res => {
						if (res.data.code == 0) {
							this.myList = res.data.data
							this.HotelInfoList.homestayId = this.myList.homestayId
							uni.setStorageSync('boundIds', this.myList.boundIds);

							this.copyList = res.data.data.houseInfoList;

							this.cardList.forEach((item, i) => {
								let copy = JSON.parse(JSON.stringify(this.cardList));
								this.$set(this.cardList[i], 'canExpand', copy.length > 1 ? true : false);
								this.$set(this.cardList[i], 'tempList', copy.length > 1 ? copy.splice(
									0, 1) : item.children);
							})
							if (res.data.data.routeList == null) {
								setTimeout(() => {
									// this.getDetails()
									this.$showModal("暂无查到船票信息,请稍后重新刷新页面或重选时间")
								}, 200)
							} else {
								res.data.data.routeList.forEach((item) => {
									this.cabinList = item.seatClasses
								})
							}

							if (res.data.data.homestayId == null) {
								this.getHomestayInfo(this.homestayId)
							} else {
								this.getHomestayInfo(this.myList.homestayId)
							}
							if (res.data.data.jointName == null) {
								setTimeout(() => {
									this.getDetails()
								}, 300)
							}
							this.dealList();
						} else this.$showModal(res.data.msg)
					})
			},

			getHomestayInfo(id) {
				this.$api.get(`/api/hotel/getHomestayInfo/${id}`)
					.then(res => {
						this.picImageList = res.data.data.picList
						if(this.picImageList.length>0){
							let temp = [];
							this.picImageList.forEach((item, index) => {
								if (item.type == 8) {
									this.VideoList.push(item)
								} else {
									temp.push(item)
								}
							})
							this.photoAlbumList = temp;
						}
						this.substrings = res.data.data.introduction.split('\n');
					})
			},

			// 在册获取数据
			getDetailsed() {
				var data = wx.getStorageSync('detailsList');
				this.$api.get('/api/shipHotel/getShipHotelJointList', this.dataList)
					.then(res => {
						res.data.data.list.forEach((item) => {
							if (item.id == data.id) {
								this.fromData.id = item.id
								this.getDetails()
							}
						})
					})
			},
			getDetailslist(id) {
				this.$api.get(`/api/hotel/getHouseDetail/${id}`).then(res => {
					this.DetailsedList = res.data.data
					this.imgList = res.data.data.picList
					this.picListlength = res.data.data.picList.length
				})
			}


		}
	}
</script>
<style lang="less">
	.swiper_img {
		position: relative;
	}

	.numPic {
		position: absolute;
		bottom: 60rpx;
		right: 60rpx;
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		// @include flex;
		justify-content: center;
		color: #FFFFFF;
	}

	.indicator-num {
		color: #fff !important;
	}

	.u-popup__content__close--top-right {
		width: 42rpx !important;
		height: 42rpx !important;
		border-radius: 50rpx !important;
		background-color: rgba(0, 0, 0, 0.2) !important;

		.uicon-close {
			margin-top: 13rpx !important;
			color: #fff !important;
			font-size: 30rpx !important;
			margin-left: 6rpx !important;
		}

	}

	.u-popup__content {
		border-radius: 32rpx 32rpx 0 0 !important;
	}

	.info,
	.book,
	.roomTypes,
	.around {
		.u-icon__icon {
			font-size: 30rpx !important;
		}
	}

	.card-store {
		position: relative;
		display: inline-block;
	}

	/* 创建置灰效果 */
	// .gray {
	// 	filter: grayscale(100%);
	// }

	.u-tag-wrapper {
		margin-right: 8rpx !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}

	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}
</style>
<style lang="scss">
	page {
		background-color: #F5F8FA;
	}

	.zk {
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		background-image: url('https://i.ringzle.com/file/20240417/2e6c5021cd2a401e847bb4528b2d07e4.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: center;
		height: 180rpx;
		line-height: 250rpx;
		color: #007A69;

	}

	.aroundList1 {
		padding: 40rpx 35rpx;
		background-color: #fff;


		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #111111;
		}

		.aroundList1-one {
			margin-top: 24rpx;
			box-sizing: border-box;
			// padding: 88rpx 30rpx;
			padding: 0 0 120rpx;
			// margin: -20rpx 20rpx;
			// border-radius: 20rpx;
			// width: 710rpx;
			height: 1000rpx;
			// background-color: #FFFFFF;
			position: relative;
			overflow: hidden;

			.aroundList1-one-image {
				border-radius: 16rpx;
				width: 100%;
				height: 368rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.two-list {
		background-color: #F0F8F6;
		color: #007A69;
		font-size: 24rpx;
		font-weight: Regular;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		margin: auto;
		display: flex;
		align-items: center;

		view {
			// display: block;
			margin: auto;
		}


		image {
			margin: 0 12rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}

	.roomTypes {
		box-sizing: border-box;
		padding: 36rpx 24rpx;
		background-color: #fff;

		.tit {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 36rpx;
			font-weight: 600;
		}

		.two-center-two {
			display: flex;
			justify-content: space-between;
			// padding: 30rpx 34rpx;

			.lfet {
				background-image: url('https://i.ringzle.com/file/20240124/a2ef2996bd1a420aaa2f6c43415fc450.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 272rpx;
				height: 96rpx;

				.lfet-one {
					font-size: 24rpx;
					color: #666666;
					font-weight: Regular;
					margin-left: 24rpx;
					margin-top: -18rpx;
				}

				.lfet-two {
					margin: 10rpx 20rpx 15rpx;

					.lfet-two-one {
						font-size: 36rpx;
						color: #111111;
						font-weight: Bold;

					}

					.lfet-two-two {
						margin-left: 6rpx;
						font-size: 24rpx;
						color: #999999;
						font-weight: Regular !important;
					}
				}



			}

			.content {
				margin: 0 20rpx;

				.content-one {
					height: 20rpx;
				}

				.content-two {
					width: 98rpx;
					height: 48rpx;
					border-radius: 50rpx;
					border: 2rpx solid #EFEFEF;
					text-align: center;
					line-height: 48rpx;
					font-size: 26rpx;
					color: #111111;
					font-weight: Regular;


				}
			}

			.right {
				background-image: url('https://i.ringzle.com/file/20240124/a2ef2996bd1a420aaa2f6c43415fc450.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 272rpx;
				height: 96rpx;

				.right-one {
					margin-left: 24rpx;
					margin-top: -18rpx;
					font-size: 24rpx;
					color: #666666;
					font-weight: Regular;
				}

				.right-two {
					margin: 10rpx 20rpx 15rpx;

					.right-two-one {
						font-size: 36rpx;
						color: #111111;
						font-weight: Bold;
					}

					.right-two-two {
						margin-left: 6rpx;
						font-size: 24rpx;
						color: #999999;
						font-weight: Regular !important;
					}
				}

			}
		}

	}

	.flight {
		box-sizing: border-box;
		position: relative;

		.line {
			left: 133rpx;
			position: absolute;
			top: 36rpx;
			height: 30rpx;
			width: 4rpx;
			background-color: #d8d8d8;
		}

		.p {
			text {
				display: inline-block;
				font-size: 24rpx;
				margin-bottom: 32rpx;

				&:nth-child(1) {
					color: #777;
				}

				&:nth-child(3) {
					color: #333;
				}

				&.circle {
					margin: 0 20rpx 0 36rpx;
					width: 14rpx;
					height: 14rpx;
					border-radius: 100%;
					background-color: #007A69;

					&.to {
						background-color: #FF4141;
					}
				}

			}
		}

		.timesCheck {
			display: flex;
			margin-bottom: 50rpx;
			// padding-bottom: 10px;
			overflow: auto;

			.keyword {
				width: 100rpx;
				display: inline-block;
				font-size: 24rpx;
				margin-bottom: 32rpx;
				color: #777;
			}

			.timesCheckData {
				overflow-y: hidden;
				box-sizing: border-box;
				display: flex;
				width: 200rpx;
				height: 150rpx;
				flex: 1;
				margin: 0 0 0 28rpx;

				.item {
					box-sizing: border-box;
					position: relative;
					border: 2rpx solid #EFEFEF;
					width: 128rpx;
					border-radius: 16rpx;
					padding: 20rpx 0;
					margin-right: 20rpx;
					min-width: 128rpx;

					.cover {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						right: 0;
						background: rgba(0, 0, 0, 0.08);
						z-index: 1;
						border-radius: 16rpx;
					}

					text {
						display: block;
						font-size: 24rpx;
						text-align: center;
						color: #999;

						&:nth-child(1) {
							color: #111;
							margin-bottom: 16rpx;
						}

						&:nth-child(2) {
							// color: #111;
							margin-bottom: 10rpx;
						}
					}

					.boat {
						box-sizing: border-box;
						position: absolute;
						margin: 0 14rpx 0;
						border-radius: 10rpx;
						width: 99rpx;
						height: 30rpx;
						color: #fff;
						font-size: 20rpx;
						// bottom: -16rpx;
						background-color: #AAAAAA;
					}
				}
			}

		}
	}

	.book {
		background-color: #fff;
		margin: 20rpx 0 0;
		padding: 0 24rpx;
		border-bottom: 20rpx solid #F5F8FA;

		.tit {
			font-size: 30rpx;
			color: #333;
			padding: 36rpx 0;
			font-weight: 600;
		}



		.date {
			display: grid;
			grid-template-columns: auto auto auto auto 120rpx;
			gap: 20rpx;
			padding-bottom: 36rpx;
			border-bottom: 1rpx solid #efefef;

			.item {
				padding: 18rpx 0;
				border: 2rpx solid #EFEFEF;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;
				height: 104rpx;
				box-sizing: border-box;

				text {
					display: block;
					color: #333;

					&:nth-child(2) {
						margin: 8rpx 0;
						color: #777;
					}

					&:nth-child(3) {
						color: #007A69;
					}
				}

				&:last-child {
					min-width: 100rpx;
					padding-top: 18rpx;

					text {
						color: #007A69;
					}
				}
			}

			.itemSelected {
				// background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
				background-color: #f3fcff;
				border: 1rpx solid #007A69;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;

				text {
					display: block;
					color: #007A69;

					&:nth-child(2) {
						margin: 8rpx 0;
						color: #007A69;
					}

					&:nth-child(3) {
						color: #007A69;
					}
				}

				&:last-child {
					padding-top: 40rpx;
					color: #007A69;
				}
			}
		}
	}


	.info {
		box-sizing: border-box;
		padding: 40rpx 30rpx 50rpx;
		margin-bottom: 20rpx;
		border-radius: 24rpx 24rpx 0 0;
		margin-top: -50rpx;
		margin-bottom: 16rpx;
		position: relative;
		z-index: 1;
		background: #fff;

		.info-content {
			display: flex;
			justify-content: space-between;

			.card-text1 {
				width: 200rpx;
				display: flex;
				justify-content: space-between;
				font-size: 22rpx;
			}

			.card-arrow-right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #007A69;
			}

		}


		.name {
			font-size: 40rpx;
			font-weight: 600;
			color: #111;
			margin-bottom: 20rpx;
		}

		.marks {
			margin: 20rpx 0 30rpx;

			text {
				display: inline-block;
				padding: 0 12rpx;
				height: 36rpx;
				font-size: 24rpx;
				color: #FF7D01;
				border: 1rpx solid #FF7D01;
				border-radius: 6rpx;
				line-height: 36rpx;
				margin-right: 8rpx;
			}
		}

		.bot {
			text {
				color: #F95953;
				font-size: 26rpx;

				&:nth-child(2) {
					font-size: 36rpx;
					margin-top: -10rpx;
				}

				&:nth-child(3) {
					font-size: 32rpx;
					margin-top: -8rpx;
				}

				&:nth-child(4) {
					width: 100rpx;
					flex: 1
				}
			}
		}
	}

	.swiper {
		position: relative;
	}

	.swiper-image {
		position: absolute;
		// bottom: 30rpx;
		left: 31rpx;
		top: 660rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		width: 206rpx;
		height: 48rpx;
		line-height: 48rpx;
		// background-color: ;
		background-color: rgba(0, 0, 0, 0.2) !important;
		border-radius: 24rpx;
		box-sizing: border-box;
		text-align: center;

		.swiper-image-left,
		.swiper-image-right {
			text-align: center;
			width: 72rpx;
			font-size: 22rpx;
			font-weight: Regular;
			color: #FFFFFF;
			margin: 0 6rpx;
		}

		// .swiper-image-left {
		// 	margin-left: 6rpx;
		// }

		.swiper-image-right1 {
			width: 24rpx;
			height: 24rpx;
			line-height: 30rpx;
			margin-right: 6rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-image-left1 {
			// font-size: 22rpx;
			// font-weight: Regular;
			width: 1rpx;
			height: 19rpx;
			background-color: #fff;
		}

		.swiper-active {
			box-sizing: border-box;
			color: #111111;
			background-color: #fff;
			// padding: 3rpx 14rpx;
			border-radius: 24rpx;
			height: 36rpx;
			width: 68rpx;
			text-align: center;
			line-height: 36rpx;
		}

	}



	.card-store {
		margin: 20rpx 0 0;
		display: flex;
		background-color: #fff;
		width: 702rpx;
		height: 240rpx;
		// border-radius: 10rpx;
		// border-bottom: 1rpx solid #cccccc;


		.card-left {
			margin-top: 20rpx;
			width: 190rpx;
			height: 190rpx;
			// border-radius: 10rpx 0 0 10rpx;

			image {
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}

		.card-right {
			width: 500rpx;
			margin-top: 20rpx;
			padding: 0 60rpx;

			.left-title {
				font-size: 30rpx;
				color: #111111;
				display: flex;
				align-items: center;

				.left-icon {
					margin-left: 15rpx;
				}
			}

			.left-text,
			.left-brekker {
				display: flex;
				color: #777777;
				font-size: 24rpx;
				// margin: 20rpx 0;

			}

			.card-price {
				font-size: 38rpx;
				color: #FF4141;
			}

			.left-price-one {

				.left-price-one-hander {
					display: flex;

					.left-price-one-left {
						margin-top: 12rpx;
						margin-left: 8rpx;
						font-size: 20rpx;
						color: #999990;
						font-weight: Regular;
						text-decoration: line-through;
					}

					.left-price-one-right {
						text-align: right;
						font-size: 38rpx;
						color: #FF4141;
						font-weight: bold;
					}
				}

				.left-price-one-bottom {
					width: 134rpx;
					text-align: center;
					border-radius: 6rpx;
					font-size: 20rpx;
					color: #B77231;
					font-weight: Regular;
					background-color: #FAF6EE;

				}
			}

		}
	}

	.boatSelected {
		box-sizing: border-box;
		// background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
		background: #F3FCFF;
		border: 1rpx solid #007A69 !important;
		font-size: 24rpx;
		text-align: center;
		border-radius: 16rpx;
		color: #007A69 !important;

		text {
			display: block;
			color: #007A69;

			&:nth-child(1) {
				// margin: 8rpx 0;
				color: #007A69 !important;
			}

			&:nth-child(2) {
				margin: 8rpx 0;
				color: #007A69 !important;
			}


			// &:nth-child(3) {
			// 	color: #007A69;
			// }
		}

		&:last-child {
			padding-top: 40rpx;
			color: #007A69;
		}


	}

	.boatColor {
		color: #FFFFFF !important;
		background-color: #007A69 !important;
	}

	.cabSelected {
		box-sizing: border-box;
		background: #F3FCFF;
		// background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
		border: 1rpx solid #007A69 !important;
		font-size: 24rpx;
		text-align: center;
		border-radius: 16rpx;
		color: #007A69 !important;

		text {
			display: block;
			color: #007A69 !important;

			&:nth-child(2) {
				margin: 8rpx 0;
				color: #007A69;
			}

			&:nth-child(3) {
				color: #007A69;
			}
		}

		&:last-child {
			padding-top: 40rpx;
			color: #007A69;
		}
	}

	.bottom-btn {
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 112rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 16rpx 30rpx;

		.left {
			margin-top: 4rpx;
			width: 100rpx;
			text-align: center;

			:nth-child(1) {
				text-align: center;
				margin-left: 12rpx;
			}
		}

		.right {
			width: 100%;
			height: 80rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			// background: linear-gradient(to right, #FF7D43, #FEAC2C);
			background-color: #007A69;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			text-align: center;
		}

	}
</style>

<style lang="scss">
	.page {
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}

	.one {
		box-sizing: border-box;
		padding: 24rpx;

		.one-title {
			font-size: 36rpx;
			color: #111111;
		}

		.one-text {
			font-size: 24rpx;
			color: #808080;
		}

		.one-input {
			box-sizing: border-box;
			width: 702rpx;
			height: 100rpx;
			background: #f5f8fa;
			line-height: 100rpx;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.bg-purple-light {
				font-size: 24rpx;
				color: #333333;
			}

			.bg-purple {
				align-items: center;
				display: flex;
				text-align: center;
				// text-align: right;
				font-size: 24rpx;
				color: #808080;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.two {
		box-sizing: border-box;
		width: 750rpx;
		height: 20rpx;
		background: #f5f8fa;
	}

	.df-two {
		box-sizing: border-box;
		background: #f0fbff;
		width: 690rpx;
		height: 91rpx;
		line-height: 91rpx;
		margin: 30rpx 0;

		.bg-purple,
		.bg-purple-dark {
			font-size: 28rpx;
			color: #111111;
			text-align: center;

			text {
				margin: 0 8rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.bg-purple-light {
			width: 98rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 28rpx;
			color: #007A69;
			border: 1rpx solid #007A69;
			text-align: center;
			border-radius: 50rpx;
		}

	}

	.three {
		box-sizing: border-box;



		.left {
			margin: 0 24rpx;

			.left-title {
				color: #111111;
				font-size: 30rpx;
			}

			.left-text {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
			}

			.left-brekker {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
			}

		}

		.right {
			margin-top: 100rpx;
			// margin-right: -10rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 88rpx;
			width: 88rpx;
			height: 88rpx;
			// background: linear-gradient(to right, #FF7D43, #FEAC2C);
			background: #007A69;
			color: #fff;
		}

	}

	.pop {
		box-sizing: border-box;
		height: 80vh;
		margin: 24rpx;
		overflow: auto;

		.u-icon__icon {
			font-size: 30rpx !important;
		}

		.pop-titles {
			text-align: center;
			margin: 0 40rpx 20rpx;
			font-size: 36rpx;
			color: #111111;

		}

		.pop-img {
			width: 100% !important;
			height: 380rpx !important;

			// border-radius: 15rpx;
			.image {
				width: 100%;
				height: 100%;
			}
		}

		.pop-title {
			// text-align: center;
			// margin: 0 40rpx 20rpx;
			margin: 6rpx 0;
			font-size: 24rpx;
			color: #111111;

		}

		.pop-title1 {
			// text-align: center;
			// margin: 0 40rpx 20rpx;
			font-size: 24rpx;
			color: #999999;

		}

	}

	.pop {
		.pop-img {
			width: 100% !important;
			height: 380rpx !important;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pop-grid {
			display: flex;
			flex-wrap: wrap;
			padding: 24rpx;


			.grid {
				width: 49%;
				height: 30rpx;
				display: flex;
				align-items: center;
				margin: 16rpx 0;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				&>view {
					margin: 0 24rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}

			.yuefen {
				box-sizing: border-box;
				width: 100%;
				height: 80rpx;
				display: flex;
			}

			.yunying11 {
				box-sizing: border-box;
				width: 33.33%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border: 1px solid #e6e6e6;
			}
		}


	}

	.pop-pop {
		box-sizing: border-box;
		height: 70vh;
		// margin: 24rpx;
		overflow: auto;
		border-radius: 32rpx 32rpx 0 0;
		// padding: 30rpx;

		.pop-img {
			width: 100% !important;
			height: 480rpx !important;
			border-radius: 32rpx 32rpx 0 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pop-titles {
			// text-align: center;
			// margin: 0 40rpx 20rpx;
			margin: 18rpx 30rpx;
			font-size: 36rpx;
			color: #111111;
			font-weight: bold;

		}

		.pop-grid {
			display: flex;
			flex-wrap: wrap;
			padding: 24rpx;


			.grid {
				width: 49%;
				height: 30rpx;
				display: flex;
				align-items: center;
				margin: 16rpx 0;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				&>view {
					margin: 0 24rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}

			.yuefen {
				box-sizing: border-box;
				width: 100%;
				height: 80rpx;
				display: flex;
			}

			.yunying11 {
				box-sizing: border-box;
				width: 33.33%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border: 1px solid #e6e6e6;
			}
		}

		.pop-text {
			padding: 30rpx;

			.pop-titled {
				// text-align: center;
				// margin: 0 40rpx 20rpx;

				.pop-title-one {
					// margin: 40rpx 30rpx 12rpx;
					font-size: 36rpx;
					color: #111111;
					font-weight: bold;
				}

				.pop-title-two {
					// margin: 12rpx 0 15rpx;
					margin: 0 30rpx;
					display: flex;
					align-items: center;

					.title-one-image {
						width: 20rpx;
						height: 22rpx;
						margin: 0 6rpx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.title-one-title {
						margin-top: 6rpx;
						font-size: 20rpx;
						font-weight: Regular;
						color: #AAAAAA;
					}
				}
			}

			.pop-list {
				display: flex;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #EFEFEF;

				.left {
					font-size: 26rpx;
					color: #111111;
					font-weight: bold;
					width: 16%;
				}

				.right {
					width: 90%;
					display: flex;
					flex-wrap: wrap;
					text-align: center;

					.item {
						display: flex;
						width: 33%;
						margin-bottom: 20rpx;
						align-items: center;

						.image {
							width: 28rpx;
							height: 28rpx;
							margin: 0 10rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							font-size: 24rpx;
							color: #333;
							font-weight: Regular;
						}
					}



				}
			}


		}



	}



	.around {
		padding: 68rpx 24rpx 85rpx;

		.title {
			font-size: 36rpx;
			color: #333;
			margin-bottom: 40rpx;
		}

		.classfy {
			// padding-right: 10%;
			margin-bottom: 30rpx;
			display: grid;
			gap: 0 50rpx;
			grid-template-columns: 200rpx 200rpx 200rpx;

			text {
				width: 188rpx;
				height: 64rpx;
				line-height: 64rpx;
				// border-radius: 16rpx;
				text-align: center;
				// border: 1rpx solid #CCCCCC;

				&.on {
					// background-image: linear-gradient(to right, #0EBFFE, #00D3E8);

					color: #007A69;
					border-bottom: 2rpx solid #007A69;
				}
			}
		}

		.aroundList {
			display: grid;
			gap: 16rpx 12rpx;
			grid-template-columns: auto auto;

			.item {
				background-color: #fff;
				padding-bottom: 16rpx;
				border-radius: 16rpx;

				.zhutu {
					height: 360rpx;
					width: 100%;
				}

				.des {
					font-weight: 600;
					color: #333;
					margin: 12rpx 0 9rpx;
					padding: 0 16rpx;
				}

				.personInfo {
					padding: 0 16rpx;
					display: flex;
					justify-content: space-between;

					.left {
						image {
							width: 36rpx;
							height: 36rpx;
							border-radius: 100%;
							margin-right: 6rpx;
							vertical-align: middle;
						}

						text {
							color: #777777;
							font-size: 24rpx;
							vertical-align: middle;
						}
					}
				}
			}
		}

		.aroundList1,
		.aroundList2 {
			display: grid;
			gap: 20rpx 12rpx;
			grid-template-columns: auto auto;

			.item {
				border-radius: 16rpx;
				background-color: #fff;
				padding-bottom: 38rpx;

				image {
					width: 100%;
					height: 268rpx;
				}

				.name {
					margin: 16rpx;
					font-size: 28rpx;
					color: #333;
				}

				.des {
					color: #777;
					font-size: 24rpx;
					padding: 0 16rpx;
				}
			}

		}

		.aroundList2 {
			image {
				height: 344rpx !important;
			}

			.price {
				padding: 0 16rpx;
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #FF4141;

				text:nth-child(1) {
					font-size: 36rpx;
					margin: 0 6rpx 0 4rpx;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					color: #777;
				}
			}
		}
	}
</style>